<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;

onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  // 散点数据
  let marksData = [
    {
      name: "点1",
      value: [10, 20],
    },
    {
      name: "点2",
      value: [15, 22],
    },
    {
      name: "点3",
      value: [34, 51],
    },
    {
      name: "点4",
      value: [25, 64],
    },
    {
      name: "点5",
      value: [42, 20],
    },
    {
      name: "点6",
      value: [32, 15],
    },
    {
      name: "点7",
      value: [68, 34],
    },
    {
      name: "点8",
      value: [25, 65],
    },
    {
      name: "点9",
      value: [45, 56],
    },
    {
      name: "点10",
      value: [35, 47],
    },
  ];
// 中心线
  let centerLine = [
    {
      name: "y",
      xAxis: 40,
    },
    {
      name: "x",
      yAxis: 40,
    },
  ];
// 中心点
  let centerMark = [
    {
      value: "中心点",
      coord: [40, 40],
    },
  ];

  let option = {
    tooltip: {
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1,
        },
        label: {
          backgroundColor: "#555",
        },
      },
    },
    grid: {
      left: 50,
      right: 50,
      bottom: "4%",
      top: "6%",
      containLabel: true,
    },
    xAxis: {
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      axisLabel: {
        show: false // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false // 不显示网格线
      },
      scale: true,
      axisLine: {
        show: false
      },
    },
    yAxis: {
      scale: true,
      axisLabel: {
        show: false // 不显示坐标轴上的文字
      },
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      splitLine: {
        show: false // 不显示网格线
      },
      axisLine: {
        show: false
      }
    },
    series: [
      {
        type: "scatter",
        data: marksData,
        symbolSize: 8,
        label: {
          show: false,
          position: "bottom",
          formatter: "{b}",
        },
        itemStyle: {
          /*          color: function (e) {
                      let randomColor =
                          "rgba(" +
                          Math.floor(Math.random() * 240) +
                          "," +
                          Math.floor(Math.random() * 240) +
                          "," +
                          Math.floor(Math.random() * 240) +
                          "," +
                          ".8" +
                          ")";
                      return randomColor.substring();
                    },*/
          color: "#1F5CFF",
        },
        // 各象限区域
        markArea: {
          silent: true,
          data: [
            // 第一象限
            [
              {
                xAxis: 40, // x 轴开始位置
                yAxis: 70, // y 轴结束位置(直接取最大值)
                itemStyle: {
                  color: "#9CB5F9",
                  opacity: 0.35
                },
                label: {
                  position: "inside",
                  color: "rgba(0, 0, 0, .1)",
                  fontSize: 22,
                },
              },
              {
                yAxis: 40, // y轴开始位置
              },
            ],
            // 第二象限
            [
              {
                yAxis: 70, // y 轴结束位置(直接取最大值)
                itemStyle: {
                  opacity: 0.2,
                  color: "#9CB5F9"
                },
                label: {
                  position: "inside",
                  color: "rgba(0, 0, 0, .1)",
                  fontSize: 22,
                },
              },
              {
                xAxis: 40, // x 轴结束位置
                yAxis: 40, // y轴开始位置
              },
            ],
            // 第三象限
            [
              {
                yAxis: 40, // y 轴结束位置
                itemStyle: {
                  opacity: 0.35,
                  color: "#9CB5F9",
                },
                label: {
                  position: "inside",
                  color: "rgba(0, 0, 0, .1)",
                  fontSize: 22,
                },
              },
              {
                xAxis: 40, // x 轴结束位置
                yAxis: 10, // y轴开始位置
              },
            ],
            // 第四象限
            [
              {
                xAxis: 40, // x 轴开始位置
                yAxis: 40, // y 轴结束位置
                itemStyle: {
                  opacity: 0.2,
                  color: "#9CB5F9"
                },
                label: {
                  position: "inside",
                  color: "rgba(0, 0, 0, .1)",
                  fontSize: 22,
                },
              },
              {
                yAxis: 10, // y轴开始位置
              },
            ],
          ],
        },
        // 中心点交集象限轴
        markLine: {
          symbol: ["none", "triangle"],
          silent: true, // 是否不响应鼠标事件
          precision: 2, // 精度
          lineStyle: {
            type: "solid",
            color: "#6A8AFF",
          },
          label: {
            color: "#6A8AFF",
            position: "end",
            formatter: "{b}",
          },
          data: centerLine,
        },
        /*        // 中心点
                markPoint: {
                  symbol: "roundRect",
                  symbolSize: 15,
                  itemStyle: {
                    color: "rgba(234, 85, 6, .8)",
                  },
                  label: {
                    position: "top",
                  },
                  data: centerMark,
                },*/
      },
    ],
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>